<template>
  <div class="rechargerecord">
    <div class="myMoney qqq">
      <div class="recharge one">
        <div class="money">
          总充值
          <!-- <span class="biao1">年</span> -->
        </div>
        <div class="xian"></div>
        <div class="operation one">
          <!-- <img src="../../assets/zongchongzhi.png" class='ibiao'> -->
          <b>{{ allPay || 0 }}元</b>
        </div>
      </div>
      <div class="recharge tow">
        <div class="money">
          今日充值
          <!-- <span class="biao2">月</span> -->
        </div>
        <div class="xian"></div>
        <div class="operation">
          <div>
            <!-- <img src="../../assets/zongchongzhi.png" class='ibiao'> -->
            <b>{{ todayPay || 0 }}元</b>
          </div>
        </div>
      </div>
      <div class="recharge three">
        <div class="money">
          账号余额
          <!-- <span class="biao3">周</span> -->
        </div>
        <div class="xian"></div>
        <div class="operation">
          <!-- <img src="../../assets/zongchongzhi.png" class='ibiao'> -->
          <b>{{ balance || 0 }}元</b>
        </div>
      </div>
    </div>
    <div class="block">
      <el-col :span="24" class="operation">
        <div class="block">
          <el-date-picker
            class="timetable"
            v-model="riqixuanze"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeChange"
          ></el-date-picker>
          <el-button type="primary" class="sousuo" @click="xuanzeriqi"
            >搜索</el-button
          >
        </div>
      </el-col>
    </div>
    <div class="pczhanshi hidden-xs-only">
      <el-table :data="listData" style="width: 100%">
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time}}</span>
          </template>
        </el-table-column>


        <el-table-column
          prop="UUID"
          label="订单号"
        ></el-table-column>
        <el-table-column
          label="充值金额"
        >
        <template slot-scope="scope">
          <span>{{ scope.row.real_amount}}</span>
        </template>
        </el-table-column>
        <el-table-column label="交易状态">
          <template slot-scope="scope">
            <span>{{ scope.row.states ? '完成':'未完成'}}</span>
          </template>
        </el-table-column>
        <template slot="empty" v-if="loding">
          <img class="data-pic" src="@/assets/BGT.png" alt="" />
        </template>
      </el-table>
    </div>
    <div class="dashadiao hidden-xs-only" style="height: 70px;">
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage2"
         :page-sizes="xiabiao"
         :page-size="xianshitiaoshu"
         layout="total, sizes, prev, pager, next, jumper"
         :total="tiaoshu"
       >
       </el-pagination>
     </div>

    <div class="zhanshi hidden-sm-and-up">
      <!-- 移动端 -->
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item
          :name="index"
          v-for="(x, index) in listData"
          :key="index"
        >
          <template slot="title">
            <span>充值时间: &nbsp;{{ x.create_time}}</span>
          </template>
          <div class="sj">订单号: &nbsp;{{ x.UUID }}</div>
          <div class="sj fudong">
            状态: &nbsp;{{ x.states===true?'完成':'未完成' }}
          </div>
          <div class="sj fudong">充值金额: &nbsp;{{ x.real_amount  }}元</div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="dashadiao hidden-sm-and-up" style="height: 70px;">
      <!-- 分页 -->
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage2"
         :page-sizes="xiabiao"
         :page-size="xianshitiaoshu"
         layout="total, sizes, prev, pager, next"
         :total="tiaoshu"
       >
       </el-pagination>
     </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: {},
  data() {
    return {
      xiabiao: [10, 20, 50, 100],
      listData:[],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      riqixuanze: [],
      tableData: [],
      shouji: [],
      pc: "1",
      currentPage2: 1,
      shijian1: "",
      shijian2: "",
      kaishitiaoshu: 0,
      dangyetiaoshu: 1,
      xianshitiaoshu: 10,
      jieshutiaoshu: 10,
      activeName: "",
      zongchongzhi: 0, //总充值
      jinrichongzhi: 0, //今日充值
      zuorichongzhi: 0, //昨日充值
      zongtiaoshu: 0, //总条数
      tiaoshu: 0, //条数
      loding: false,
      zhanghaoyue:0,
      page_index:1,
      page_cnt:10,
      allPay:'',
      todayPay:'',
      list_cnt:'',
      balance:'',
    };
  },
  computed: {},
  created() {
    // this.zhanghaoyue = this.$store.state.user.yue;
    let date = [];
    let start =
      moment()
        .add("month", 0)
        .format("YYYY-MM") + "-01";
    let start_1 = moment(start).format("YYYY-MM-DD");
    let end = moment(start)
      .add("month", 1)
      .add("days", -1)
      .format("YYYY-MM-DD");
    date.push(start_1);
    date.push(end);
    this.shijian1 = date[0];
    this.shijian2 = date[1];
    this.commisslist();
  },
  mounted() {},
  watch: {
    riqixuanze(newVal, oldVal) {
      if (newVal == null) {
        this.riqixuanze = [];
      }
      if (newVal) {
        this.kaishishu = 0;
        this.jieshushu = this.limt;
      }
    }
  },
  methods: {
    timeChange(time) {
      if (time) {
        const start = this.$moment(time[0])
          .startOf("day")
          .format("YYYY-MM-DD");
        const end = this.$moment(time[1])
          .endOf("day")
          .format("YYYY-MM-DD");
        this.riqixuanze = [start, end];
      } else {
        this.riqixuanze = [];
      }
    },
    //充值记录接口
    async commisslist() {
      let data = {
        page_index:this.page_index,
        page_cnt:this.page_cnt
      };
      const [err, res] = await this.$http.request({
        url: "/payRecord",
        method: "GET",
        data
      });
      if (err) return;
      console.log(res.data.data);
      this.allPay=res.data.data.allPay
      this.todayPay=res.data.data.todayPay
      this.balance=res.data.data.balance
      this.listData=res.data.data.payOrder_list
      this.tiaoshu=res.data.data.list_cnt
      this.listData.map(item=>{
        item.create_time = item.create_time.replace('T',' ').slice(0,19)
        return item
      })
      this.loding = true;
      // console.log(res)
    },
    handleEdit(index, row) {
      // console.log(index, row);
    },
    handleDelete(index, row) {
      // console.log(index, row);
    },
    async handleSizeChange(val) {
      this.page_cnt=val
      this.commisslist()
    },
    async handleCurrentChange(val) {
      this.page_index=val
      this.commisslist()
    },
    //搜索触发
    async xuanzeriqi() {
      let searchTimes=this.riqixuanze
      let startTime =searchTimes[0]
      let endTime=searchTimes[1]
      let data={
        begin_time:startTime,
        end_time:endTime,
        page_index:this.page_index,
        page_cnt:this.page_cnt
      }
      const [err, res]=await this.$http.request({
        url:'/payRecord',
        method:'GET',
        data
      })
          if (err) return;
          if(res.data.result==='1'){
            this.listData=res.data.data.payOrder_list
            this.tiaoshu=res.data.data.list_cnt
          }
    }
  },
};
</script>

<style scoped lang="stylus">
@import './rechargerecord.styl';
</style>
